<div class="layui-card-body" >
    <div class="layui-card" >
        <div class="layui-card-header">项目概况</div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" value="" class="layui-input"
                           autocomplete="off"
                           placeholder="不要超过32个汉字" id="project_title" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input"
                               value="{$info.s_time|default=''}" id="project_s_time" disabled>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input"
                               value="{$info.e_time|default=''}" id="project_e_time" disabled>
                    </div>

                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">实际时间</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input"
                               value="{$info.w_time|default=''}" id="project_w_time" disabled>
                    </div>

                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">计划时间</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input"
                               value="{$info.p_time|default=''}" id="project_p_time" disabled>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">项目状态</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input"
                               value="{$info.status|default=''}" id="project_status" disabled>
                    </div>
                </div>

            </div>
            <div class="layui-form-item  layui-form-text ">
                <label class="layui-form-label">项目详情</label>
                <div class="layui-input-block">
                    <div id="project_info">
                    </div>
                </div>
            </div>
            <hr >
            <div class="layui-row  layui-col-space10">
                <div class="layui-col-md5">
                    <div class="layui-card">
                        <div class="layui-card-header">项目看板</div>
                        <div class="layui-card-body">
                            <div id="main" style="height:600px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md7">
                    <div class="layui-card">
                        <div class="layui-card-header">工时分析</div>
                        <div class="layui-card-body">
                            <div id="timemain" style="height:300px;"></div>
                        </div>
                    </div>
                    <div class="layui-row  layui-col-space10">
                        <div class="layui-col-md7">
                            <div class="layui-card">
                                <div class="layui-card-header">项目成员</div>
                                <div class="layui-card-body">
                                    <table class="layui-table text-center" id="list" lay-filter="list"
                                           list-url="{:url('project_user_lists?project_id='.$project_id)}"></table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md5">
                            <div class="layui-card">
                                <div class="layui-card-header">项目信息</div>
                                <div class="layui-card-body">
                                    <div>服务电话:0315-6664000<br/>
                                        服务微信:
                                        <img src="https://cdn.weibuyun.com/weibu_weixin.jpg" width="150">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['element', 'table', 'form'], function () {
        var element = layui.element
            , form = layui.form
            , table = layui.table;
        var dom = document.getElementById("main");
        var myChart = echarts.init(dom);
        var timedom = document.getElementById("timemain");
        var timemyChart = echarts.init(timedom);
        var app = {};
        var option = {};
        var timeoption = {};
        table.render({
            elem: '#list'
            , url: "{:Url('project_user_lists?project_id='.$project_id)}"
            , page: false
            , limit: 20
            , cols: [[
                {field: 'nickname', width: 150, title: '用户名称'}
                , {field: 'title', width: 150, title: '项目角色'}
            ]]
        });
        getprojectinfo()

        function getprojectinfo() {
            myChart.showLoading();
            timemyChart.showLoading();
            $.ajax({
                url: "{:url('project/projectadmin/getprojectinfo?project_id='.$project_id)}",
                type: 'get',
                dataType: 'json',
            })
                .done(function (res) {
                    if (res.data == null) {
                        layer.msg('没有内容', {
                            time: 1500,
                            icon: 5
                        });
                    } else {
                        var item = res.data;
                        $('#project_title').val(item.project.title);
                        $('#project_s_time').val(item.project.s_time);
                        $('#project_e_time').val(item.project.e_time);
                        $('#project_w_time').val(item.project.w_time);
                        $('#project_p_time').val(item.project.p_time);
                        $('#project_info').html(item.project.info)
                        $('#project_status').val(item.project.status);
                        option = {
                            color: ['#009688', '#FFB800', '#FF5722', '#01AAED', '#2F4056', '#5FB878', '#393D49'],
                            legend: {},
                            tooltip: {
                                trigger: 'axis',
                                showContent: false
                            },
                            dataset: {
                                source: [
                                    ['product', '总体', '需求', '缺陷', '迭代'],
                                    ['超时', item.sum.out, item.model_1.out, item.model_2.out, item.model_3.out],
                                    ['未完成', item.sum.no, item.model_1.no, item.model_2.no, item.model_3.no,],
                                    ['未处理', item.sum.no_work, item.model_1.no_work, item.model_2.no_work, item.model_3.no_work,],
                                    ['处理中', item.sum.work, item.model_1.work, item.model_2.work, item.model_3.work],
                                    ['完成', item.sum.ok, item.model_1.ok, item.model_2.ok, item.model_3.ok]
                                ]
                            },
                            xAxis: {type: 'category'},
                            yAxis: {gridIndex: 0},
                            grid: {top: '55%'},
                            series: [
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {
                                    type: 'pie',
                                    id: 'pie',
                                    radius: '30%',
                                    center: ['50%', '25%'],
                                    label: {
                                        formatter: '{b}: {@总体} ({d}%)'
                                    },
                                    encode: {
                                        itemName: 'product',
                                        value: '总体',
                                        tooltip: '总体'
                                    }
                                }
                            ]
                        }
                        myChart.hideLoading();
                        myChart.setOption(option, true);
                        timeoption = {
                            color: ['#009688', '#FFB800', '#FF5722', '#01AAED', '#2F4056', '#5FB878', '#393D49'],
                            legend: {},
                            tooltip: {},
                            dataset: {
                                source: [
                                    ['product', '计划工时', '实际工时'],
                                    ['总工时', item.sum.p_time, item.sum.w_time],
                                    ['需求工时', item.model_1.p_time, item.model_1.w_time],
                                    ['缺陷工时', item.model_2.p_time, item.model_2.w_time],
                                    ['迭代工时', item.model_3.p_time, item.model_3.w_time],
                                ]
                            },
                            xAxis: {type: 'category'},
                            yAxis: {},
                            // Declare several bar series, each will be mapped
                            // to a column of dataset.source by default.
                            series: [
                                {type: 'bar'},
                                {type: 'bar'}
                            ]
                        };
                        timemyChart.hideLoading();
                        timemyChart.setOption(timeoption, true);
                    }
                })
                .fail(function () {
                    layer.msg('服务器异常', {
                        time: 1500,
                        icon: 5
                    });
                })
                .always(function () {

                });

        }

        timemyChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });

        myChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });


    });
</script>






